<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>平安银行银企直连</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="小镖人、平台银行、银企直连">
    <meta name="description" content="小镖人、平台银行、银企直连">
    <link rel="stylesheet" href="../../xbr_layui_extend/layui-v2.6.8/css/layui.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="layui-row page-title ">
    <div class="heading-page">
        <img class="heading-logo" src="../../static/img/平安银行.png" height="60px" alt=""/>
        <span class="heading-title">
            <div>平安银行银企直连</div>
            <div style="font-size: 12px;margin-top: 8px" id="currentAddress">http://117.187.230.142:8089/views/pab/index</div>
        </span>
    </div>
    <div class="heading-right">
        <button class="layui-btn layui-btn-primary layui-border-blue" id="currentPlat">当前平台：正在获取...</button>
    </div>
</div>
<hr>
<div class="layui-row">
    <div class="layui-col-sm3 box-left">
        <fieldset class="layui-elem-field ">
            <legend>连接状态</legend>
            <div id="svgContainer" style="width: 100%"></div>
<!--            <img  id="imgContainer" src="../../static/img/bank-status/状态机-前置故障.svg" width="100%" alt=""/>-->
            <p style="text-align: right;padding: 0 24px">最后更新时间：<span id="current"></span></p>
            <div class="pc-param">
                <h3>配置参数</h3>
                <p>前置地址：<span id="reqUrl" style="float: right">117.187.230.142</span></p>
                <p>是否前置分离：<span id="separation" style="float: right">否</span></p>
                <p>商户码：<span id="merchantCode" style="float: right">0000000</span></p>
                <p>文件地址：<span id="download" style="float: right">/bank/pab/</span></p>
                <p>已开机时长：<span id="distanceTime" style="float: right">20小时30分钟25秒</span></p>
            </div>
        </fieldset>
    </div>
    <div class="layui-col-sm9 box-right">
        <fieldset class="layui-elem-field ">
            <legend>常用业务</legend>
            <div class="pc-menu-item" size="640px,480px" path="./open/queryBankAcc.html">
                <img class="heading-logo" src="../../static/img/bank-item/余额.svg" alt=""/>
                <h3>账户余额查询</h3>
            </div>
            <div class="pc-menu-item" size="680px,540px" path="./open/paySingleTransfer.html">
                <img class="heading-logo" src="../../static/img/bank-item/单笔转账.svg" alt=""/>
                <h3>单笔转账</h3>
            </div>
            <div class="pc-menu-item" size="820px,640px" path="./open/payBatchTransfer.html">
                <img class="heading-logo" src="../../static/img/bank-item/批量转账.svg" alt=""/>
                <h3>批量转账</h3>
            </div>
            <div class="pc-menu-item" size="820px,640px" path="./open/queryLocalTransfer.html">
                <img class="heading-logo" src="../../static/img/bank-item/回单.svg" alt=""/>
                <h3>本地交易记录</h3>
            </div>
            <div class="pc-menu-item" size="640px,480px" path="./open/querySingleTransfer.html">
                <img class="heading-logo" src="../../static/img/bank-item/转账查询.svg" alt=""/>
                <h3>单笔转账查询</h3>
            </div>
            <div class="pc-menu-item" size="820px,640px" path="./open/queryBatchTransfer.html">
                <img class="heading-logo" src="../../static/img/bank-item/批量转账查询.svg" alt=""/>
                <h3>批量转账查询</h3>
            </div>
            <div class="pc-menu-item" size="920px,680px" path="./open/queryTransferDetails.html">
                <img class="heading-logo" src="../../static/img/bank-item/流水查询.svg" alt=""/>
                <h3>交易明细查询</h3>
            </div>
        </fieldset>
        <fieldset class="layui-elem-field">
            <legend>资料下载</legend>
            <div class="pc-menu-item" size="820px,640px" path="./open/downloadTransferDetails.html">
                <img class="heading-logo" src="../../static/img/bank-item/流水查询.svg" alt=""/>
                <h3>银行流水下载</h3>
            </div>
            <div class="pc-menu-item" size="920px,680px" path="./open/downloadReceipt.html">
                <img class="heading-logo" src="../../static/img/bank-item/回单.svg" alt=""/>
                <h3>电子回单下载</h3>
            </div>
            <div class="pc-menu-item" size="640px,480px" path="./open/downloadTask.html">
                <img class="heading-logo" src="../../static/img/bank-item/下载任务.svg" alt=""/>
                <h3>下载任务</h3>
            </div>
        </fieldset>
        <fieldset class="layui-elem-field ">
            <legend>系统对账</legend>
            <div class="pc-menu-item" size="820px,680px" path="./open/reconByHistory.html">
                <img class="heading-logo" src="../../static/img/bank-item/回单.svg" alt=""/>
                <h3>银行对账列表</h3>
            </div>
            <div class="pc-menu-item" size="820px,680px" path="./open/reconByDay.html">
                <img class="heading-logo" src="../../static/img/bank-item/对账.svg" alt=""/>
                <h3>系统日志</h3>
            </div>
        </fieldset>
    </div>
</div>
<script src="../../xbr_layui_extend/layui-v2.6.8/layui.js"></script>
<script>

    layui.extend({
        admin: '/platform/xbr_layui_extend/admin' //集成路径
    }).use(["admin", 'form', 'table','lottie'], function () {
        const $ = layui.$, lottie = layui.lottie,admin=layui.admin;
        const animations = {
            normal: "../../static/img/bank-status/状态机-正常.json",
            frontErr: "../../static/img/bank-status/状态机-前置故障.json",
            bankErr: "../../static/img/bank-status/状态机-银行故障.json"
        };
        //播放动画
        function payAnimation(animation){
            lottie.loadAnimation({
                wrapper: document.getElementById('svgContainer'),
                path: animation,
                animType: 'svg',
                autoplay: true,
                loop: true,
            });
        }
        //播放指定动画
        initPlat();
        //批量监听
        batchClick();
        function batchClick() {
            $(document).on('click', ".pc-menu-item", function () {
                if ($(this).attr("size") == null) return;
                const size = $(this).attr("size").split(",");
                const sizeW = size[0], sizeH = size[1];
                const contentPath = $(this).attr("path");
                openItemDialog(this.innerText, [sizeW, sizeH], contentPath);
            });
        }
        $("#currentPlat").click(function () {  // 登录按钮
            //弹出页面
            layer.open({
                type: 2,
                title: '登录',
                content: '../user/lverifyCode.html', // 替换为实际页面的 URL
                area: ['600px', '300px'],
                maxmin: true,
                end: function () {   // 弹层关闭后执行回调事件
                    location.reload(); // 刷新当前页面
                }
            });
        });


        //获取登录用户信息
        function initPlat() {
            $("#currentAddress").html(window.location.href.split("?")[0]);
            const token = admin.getParam("token");
            if (token!=null) admin.saveToken(token);
            admin.req({
                url: "/platform/user/getLoginUserInfo",
                data: {token: admin.getParam("token")},
                done: function (res) {
                    const platNameElm = $("#currentPlat");
                    if (res.data != null) {
                        platNameElm.text(res.data['organizeName']);
                    } else {
                        platNameElm.text("未初始化");
                    }
                    loadServerStatusBag();
                }
            });
        }

        ///系统探测
        function loadServerStatusBag() {
            admin.req({
                url: "/platform/pab/getServerStatusBag",
                data: {token: admin.getParam("token")},
                done: function (res) {
                    $("#current").html(layui.util.toDateString(new Date(),'yyyy-MM-dd HH:mm:ss'));
                    $("#separation").text(res.data['separation']);
                    $("#merchantCode").text(res.data['merchantCode']);
                    $("#download").text(res.data['download']);
                    $("#reqUrl").text(res.data['reqUrl']);
                    $("#distanceTime").text(res.data['distanceTime']);
                    $("#imgContainer").hide();
                    payAnimation(animations[res.data['netStatus']]);
                },
                fail: function (res) {
                    payAnimation(animations.frontErr);
                }
            });
        }

        //监听行工具事件
        function openItemDialog(title, size, contentPath) {
            layer.open({
                type: 2,
                area: size,
                title: title,
                maxmin: true ,
                shadeClose: true,
                content: [contentPath],
                success: function (layero, index) {
                    const iframe = window['layui-layer-iframe' + index];
                    if (iframe['child']!=null) iframe['child']();
                }
            });
        }



    });
</script>
</body>
</html>